<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.js"></script>
</head>
<body>
	<div>当前用户id ： ${id}</div>
	<div>
		<div>
			<textarea rows="3" cols="30" id="content"></textarea>
		</div>
		<span> 接收人Id ： <input type="text" id="toUserId">
		</span> <br> <span> <input type="button" id="send" value="发送消息">
		</span>
	</div>
	<div>
		接收到的消息 ：
		<div id="msg"></div>
	</div>
</body>

<script>
	var formUserId = "${id}";
	var sockJs = new SockJS("http://127.0.0.1:8866/socket");
	var stompClient = Stomp.over(sockJs);
	stompClient.connect({}, function(data) {
		/* 订阅服务端发来的消息 */
		stompClient.subscribe("/user/" + formUserId + "/message/list",
				function(response) {
					$("#msg").append(response.body + '<br/>');
				})
	})

	$("#send").click(function() {
		var content = $("#content").val();
		var toUserId = $("#toUserId").val();
		stompClient.send("/message", {}, JSON.stringify({
			content : content,
			formUserId : formUserId,
			toUserId : toUserId
		}))

	})
</script>
</html>